<template>
  <div class="searchResult">
    <div class="newBook">
      <div class="searcHead">
        <img src="../assets/ss.png" alt="" />
        <input type="text" placeholder="人类镇守使" :value="text" />
        <span>
          <router-link to="/search">取消</router-link>
        </span>
      </div>
      <div class="newAll" v-for="(item, index) in resultList" :key="index">
        <div class="newItem">
          <router-link :to="`/bookDetails/${item._id}`">
            <div class="itemleft">
              <img
                :src="'http://statics.zhuishushenqi.com' + item.cover"
                alt=""
              />
            </div>
            <div class="itemright">
              <div class="itemname">{{ item.title }}</div>
              <div class="synopsis">
                {{ item.shortIntro }}
              </div>
              <div class="bom">
                <div class="bom_left">
                  <img src="../assets/zz.png" alt="" />
                  <div class="author">{{ item.author }}</div>
                  <!-- 言归正传 -->
                </div>
                <div class="bom_right">
                  <span class="type">{{ item.cat }}</span>
                  <span class="isOk">{{
                    item.isSerial ? "连载中" : "完结"
                  }}</span>
                  <span class="textNum">{{ item.retentionRatio }}万字</span>
                </div>
              </div>
            </div>
          </router-link>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    text: {
      text: String,
    },
  },
  data() {
    return {
      resultList: [],
    };
  },
  created() {
    if (this.text == undefined && this.text == null) {
      console.log("空");
    }
    this.$axios.get(`/search?keyword=+${this.text}`).then((d) => {
      let data = d.data.books;
      this.resultList = data.splice(0, 15);
      console.log(this.resultList);
      console.log(d);
    });
  },
  methods: {},
};
</script>

<style lang="less" scoped>
.newBook {
  background: #fff;
  margin: 3vw 0vw;
  .searcHead {
    input {
      padding-left: 10vw;
      background: rgb(246, 247, 249);
      border: none;
      height: 8vw;
      margin: 2vw 4vw;
      width: 66vw;
      border-radius: 6px;
    }
    input::-webkit-input-placeholder {
      color: #ccc;
    }
    img {
      position: absolute;
      left: 6vw;
      top: 6vw;
      width: 6vw;
      height: 6vw;
    }
    span {
      a {
        color: rgb(51, 55, 61);
        display: inline-block;
        width: 14vw;
        text-align: center;
      }
    }
  }
  .newAll {
    margin: 0vw 4vw;
    .newItem {
      border-bottom: 1px solid rgb(240, 241, 242);
      padding: 4vw 0vw 4vw 0vw;
      a {
        display: flex;

        .itemleft {
          img {
            width: 22vw;
            height: 28vw;
          }
        }
        .itemright {
          margin-left: 1vw;
          .itemname {
            font-weight: bold;
            font-size: 18px;
            color: black;
          }
          .synopsis {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
            color: rgb(164, 155, 163);
            font-size: 14px;
            margin: 3vw 0vw;
          }
          .bom {
            display: flex;
            justify-content: space-between;
            .bom_left {
              img {
                width: 4vw;
                height: 4vw;
                vertical-align: middle;
              }
              .author {
                display: inline-block;
                color: rgb(164, 155, 163);
                font-size: 14px;
              }
            }
            .bom_right {
              .type {
                font-size: 12px;
                color: rgb(145, 150, 158);
                border: 1px solid rgb(226, 228, 230);
                margin-right: 1vw;
              }
              .isOk {
                font-size: 12px;
                color: rgb(237, 66, 75);
                border: 1px solid rgb(250, 203, 206);
                margin-right: 1vw;
              }
              .textNum {
                font-size: 12px;
                color: rgb(66, 132, 237);
                border: 1px solid rgb(203, 222, 250);
              }
            }
          }
        }
      }
    }
  }
}
</style>